import { View, Text, FlatList, LogBox, Dimensions } from "react-native";
import styles from "./index.style";
import React from "react";
import Slider from "@react-native-community/slider";
import { MessageType } from "@/types/chat-message";
import { useTheme } from "@/contexts/ThemeContext";

// 忽略Slider的defaultProps警告
LogBox.ignoreLogs([
  "Warning: Slider: Support for defaultProps will be removed",
]);

const screenWidth = Dimensions.get("window").width;

interface ExampleMessageProps {
  id: number;
  sender: "user" | "bot";
  content: string;
  system: boolean;
  type: MessageType;
}

// 示例消息数据（无头像字段）
const exampleMessages: ExampleMessageProps[] = [
  {
    id: 1,
    sender: "bot",
    content: "您好",
    system: false,
    type: MessageType.TEXT,
  },
  {
    id: 2,
    sender: "user",
    content: "您好，有什么可以帮助您的吗？",
    system: false,
    type: MessageType.TEXT,
  },
];

function ChatSetting() {
  const { colors } = useTheme();

  return (
    <View style={{ backgroundColor: colors.backgroundLight }}>
      {/* 聊天气泡预览 */}
      <View
        style={[
          styles.previewContainer,
          {
            backgroundColor: colors.background,
            shadowColor: colors.card.shadow,
          },
        ]}
      >
        <Text style={[styles.previewTitle, { color: colors.text.primary }]}>
          聊天气泡效果预览
        </Text>
        <FlatList
          data={exampleMessages}
          keyExtractor={(item) => String(item.id)}
          scrollEnabled={false}
          renderItem={({ item }) => {
            const isCurrentUser = item.sender === "user";
            return (
              <View style={styles.messageContainer}>
                <View
                  style={[
                    styles.messageBubble,
                    isCurrentUser ? styles.bubbleRight : styles.bubbleLeft,
                    {
                      backgroundColor: isCurrentUser
                        ? colors.primary
                        : colors.inputBackground,
                    },
                  ]}
                >
                  {item.type === MessageType.TEXT && (
                    <Text style={{ color: colors.text.primary }}>
                      {item.content}
                    </Text>
                  )}
                </View>
              </View>
            );
          }}
        />
      </View>

      {/* 设置项区域 */}
      <View
        style={[styles.settingsCard, { backgroundColor: colors.background }]}
      >
        <Text style={{ color: colors.text.primary }}>字体大小设置</Text>
        <Slider
          style={{ width: screenWidth * 0.8, height: 40 }}
          minimumValue={12}
          maximumValue={24}
          step={1}
          value={16}
          minimumTrackTintColor={colors.primary}
          maximumTrackTintColor={colors.primary}
          thumbTintColor={colors.primary}
        />
      </View>

      {/* 设置项区域 */}
      <View
        style={[styles.settingsCard, { backgroundColor: colors.background }]}
      >
        <Text style={{ color: colors.text.primary }}>圆角大小设置</Text>
        <Slider
          style={{ width: screenWidth * 0.8, height: 40 }}
          minimumValue={0}
          maximumValue={16}
          step={1}
          minimumTrackTintColor={colors.primary}
          maximumTrackTintColor={colors.primary}
          thumbTintColor={colors.primary}
        />
      </View>
    </View>
  );
}

export default ChatSetting;
